//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import React, {
	PureComponent,
	Fragment
} from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { getNodeByNameAndCallbackProcess } from '@/components/_utils/algorithmTools';
import {
	Row,
	Col,
	Card,
	Form,
	Input,
	Select,
	Icon,
	Button,
	Modal,
	message,
	Divider,
	Table,
	DatePicker,
  Tabs
} from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import HistogramCharts from './histogramCharts';
import PieCharts from './pieCharts';
import LineCharts from './lineCharts';
import PoliceCharts from '@/components/PoliceCharts';
import styles from './ProUserList.less';
import {getValue} from '@/utils/globalcommon';
import {initTotalList} from '@/utils/globalcommon';
const FormItem = Form.Item;
const { Option } = Select;
const { confirm } = Modal;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;


const mzdata = [
          {
            x: '汉族',
            y: 80,
          },
          {
            x: '回族',
            y: 60,
          },
          {
            x: '藏族',
            y: 40,
          },
          {
            x: '蒙古族',
            y: 45,
          },
          {
            x: '满族',
            y: 30,
          },

        ]

    const sexdata = [
        { label: '2010', sum: 200, 男: 120, 女: 80, 男女比例: 4 },
        { label: '2011', sum: 260, 男: 150, 女: 110, 男女比例: 2 },
        { label: '2012', sum: 280, 男: 180, 女: 100, 男女比例: 3 },
        { label: '2013', sum: 300, 男: 200, 女: 100, 男女比例: 2 },
        { label: '2014', sum: 350, 男: 220, 女: 130, 男女比例: 4 },
        { label: '2015', sum: 420, 男: 260, 女: 160, 男女比例: 2 },
        { label: '2016', sum: 400, 男: 240, 女: 160, 男女比例: 8 },
        { label: '2017', sum: 442, 男: 121, 女: 321, 男女比例: 7 },
        { label: '2018', sum: 467, 男: 233, 女: 234, 男女比例: 4 },
        { label: '2019', sum: 558, 男: 435, 女: 123, 男女比例: 1 },
    ]

    const xldata = [
        { label: "2010", 本科: 18, 大专: 35,专科:30,高中:90 },
        { label: "2011", 本科: 30, 大专: 46,专科:34,高中:123 },
        { label: "2012", 本科: 22, 大专: 38,专科:32,高中:100 },
        { label: "2013", 本科: 30, 大专: 46,专科:34,高中:123 },
        { label: "2014", 本科: 25, 大专: 40,专科:30,高中:100 },
        { label: "2015", 本科: 30, 大专: 46,专科:34,高中:123 },
        { label: "2016", 本科: 33, 大专: 40,专科:38,高中:110 },
        { label: "2017", 本科: 30, 大专: 46,专科:34,高中:123 },
        { label: "2018", 本科: 28, 大专: 40,专科:30,高中:120 },
        { label: "2019", 本科: 30, 大专: 46,专科:34,高中:123 },
    ]

    const jxdata = [
        {
          x: '一级警司',
          y: 16,
        },
        {
          x: '二级警司',
          y: 37,
        },
        {
          x: '一级警督',
          y: 23,
        },
        {
          x: '二级警督',
          y: 14,
        },
        {
          x: '三级警督',
          y: 26,
        },
        {
          x: '一级警监',
          y: 16,
        },
        {
          x: '二级警监',
          y: 29,
        },
        {
          x: '三级警监',
          y: 56,
        },
    ]


    const zwdata = [
        {
          x: '省部级正职',
          y: 10,
        },
        {
          x: '省部级副职',
          y: 20,
        },
        {
          x: '厅局级正职',
          y: 7,
        },
        {
          x: '厅局级副职',
          y: 14,
        },
        {
          x: '县处级正职',
          y: 19,
        },
        {
          x: '县处级副职',
          y: 16,
        },

    ]

    const xlcolumn = ['本科','大专','专科','高中']

    const defs = [
      {
        dataKey: 'y',
        min: 0,
      },
      {
        dataKey: 'x',
      },
    ];




    const mzcolumns = [
      {
        title: '民族',
        dataIndex: 'x',
      },
      {
        title: '人数',
        dataIndex: 'y',
      },
    ];

    const jxcolumns = [
      {
        title: '警衔',
        dataIndex: 'x',
      },{
        title: '人数',
        dataIndex: 'y',
      }
    ]

    const sexcolumns = [
      {
        title: '年代',
        dataIndex: 'label',
      },
      {
        title: '男',
        dataIndex: '男',
      },
      {
        title: '女',
        dataIndex: '女',
      },
      {
        title: '总数',
        dataIndex: 'sum',
      },
      {
        title: '比例(%)',
        dataIndex: '男女比例',
      },
    ];


    const xlcolumns = [
      {
        title: '年代',
        dataIndex: 'label',
      },
      {
        title: '本科',
        dataIndex: '本科',
      },
      {
        title: '大专',
        dataIndex: '大专',
      },
      {
        title: '专科',
        dataIndex: '专科',
      },
      {
        title: '高中',
        dataIndex: '高中',
      },
    ];

    const zwcolumns = [
      {
        title: '职务',
        dataIndex: 'x',
      },
      {
        title: '人数',
        dataIndex: 'y',
      },
    ];

    const jlpzcolumn = ['刑事侦查','铁路公安','特勤','交通管理','公安院校']
    const jlpzdata = [
        { label: "2010", 刑事侦查: 18, 铁路公安: 35,特勤:30,交通管理:90,公安院校:100 },
        { label: "2011", 刑事侦查: 30, 铁路公安: 46,特勤:34,交通管理:123,公安院校:130 },
        { label: "2012", 刑事侦查: 22, 铁路公安: 38,特勤:32,交通管理:100,公安院校: 120 },
        { label: "2013", 刑事侦查: 30, 铁路公安: 46,特勤:34,交通管理:123,公安院校: 110 },
        { label: "2014", 刑事侦查: 25, 铁路公安: 40,特勤:30,交通管理:100,公安院校:120 },
        { label: "2015", 刑事侦查: 30, 铁路公安: 46,特勤:34,交通管理:123,公安院校: 130 },
        { label: "2016", 刑事侦查: 33, 铁路公安: 40,特勤:38,交通管理:110,公安院校: 140 },
        { label: "2017", 刑事侦查: 30, 铁路公安: 46,特勤:34,交通管理:123,公安院校: 145 },
        { label: "2018", 刑事侦查: 28, 铁路公安: 40,特勤:30,交通管理:120,公安院校: 130 },
        { label: "2019", 刑事侦查: 30, 铁路公安: 46,特勤:34,交通管理:123,公安院校: 150 },
    ]
    const jlpzcolumns = [
      {
        title: '年代',
        dataIndex: 'label',
      },
      {
        title: '刑事侦查',
        dataIndex: '刑事侦查',
      },
      {
        title: '铁路公安',
        dataIndex: '铁路公安',
      },
      {
        title: '特勤',
        dataIndex: '特勤',
      },
      {
        title: '交通管理',
        dataIndex: '交通管理',
      },
      {
        title: '公安院校',
        dataIndex: '公安院校',
      },
    ];

    const mjzldataPie = [
        {
          x: '统一招录',
          y: 16,
        },
        {
          x: '毕业分配',
          y: 37,
        },
        {
          x: '聘用',
          y: 23,
        },
        {
          x: '军转安置',
          y: 14,
        },
        {
          x: '调任专任',
          y: 26,
        },
    ]
    const mjzlcolumn = ['统一招录','毕业分配','聘用','军转安置','调任转任']
    const mjzldata = [
        { label: "2015", 统一招录: 30, 毕业分配: 50,聘用:34,军转安置:100,调任转任: 130 },
        { label: "2016", 统一招录: 33, 毕业分配: 40,聘用:38,军转安置:110,调任转任: 140 },
        { label: "2017", 统一招录: 60, 毕业分配: 46,聘用:65,军转安置:123,调任转任: 160 },
        { label: "2018", 统一招录: 80, 毕业分配: 40,聘用:30,军转安置:120,调任转任: 130 },
        { label: "2019", 统一招录: 90, 毕业分配: 95,聘用:85,军转安置:123,调任转任: 180 },
    ]
    const mjzlcolumns = [
      {
        title: '年代',
        dataIndex: 'label',
      },
      {
        title: '统一招录',
        dataIndex: '统一招录',
      },
      {
        title: '毕业分配',
        dataIndex: '毕业分配',
      },
      {
        title: '聘用',
        dataIndex: '聘用',
      },
      {
        title: '军转安置',
        dataIndex: '军转安置',
      },
      {
        title: '调任转任',
        dataIndex: '调任转任',
      },
    ];

    const jyxlcolumn = ['入警训练','晋升训练','警钟部门专业训练','警务技战术训练','发展训练'];
    const jyxldata = [
        { label: "2010", 入警训练: 50, 晋升训练: 60,警钟部门专业训练:50,警务技战术训练:70,发展训练:90 },
        { label: "2011", 入警训练: 55, 晋升训练: 70,警钟部门专业训练:60,警务技战术训练:80,发展训练:100 },
        { label: "2012", 入警训练: 60, 晋升训练: 80,警钟部门专业训练:85,警务技战术训练:95,发展训练: 110 },
        { label: "2013", 入警训练: 65, 晋升训练: 75,警钟部门专业训练:90,警务技战术训练:100,发展训练: 120 },
        { label: "2014", 入警训练: 70, 晋升训练: 80,警钟部门专业训练:85,警务技战术训练:95,发展训练:110 },
        { label: "2015", 入警训练: 80, 晋升训练: 50,警钟部门专业训练:34,警务技战术训练:100,发展训练: 130 },
        { label: "2016", 入警训练: 70, 晋升训练: 40,警钟部门专业训练:38,警务技战术训练:110,发展训练: 140 },
        { label: "2017", 入警训练: 60, 晋升训练: 46,警钟部门专业训练:65,警务技战术训练:123,发展训练: 160 },
        { label: "2018", 入警训练: 80, 晋升训练: 40,警钟部门专业训练:30,警务技战术训练:120,发展训练: 130 },
        { label: "2019", 入警训练: 100, 晋升训练: 95,警钟部门专业训练:95,警务技战术训练:130,发展训练: 160 },
    ];
    const jyxlcolumns = [
      {
        title: '年代',
        dataIndex: 'label',
      },
      {
        title: '入警训练',
        dataIndex: '入警训练',
      },
      {
        title: '晋升训练',
        dataIndex: '晋升训练',
      },
      {
        title: '警钟部门专业训练',
        dataIndex: '警钟部门专业训练',
      },
      {
        title: '警务技战术训练',
        dataIndex: '警务技战术训练',
      },
      {
        title: '发展训练',
        dataIndex: '发展训练',
      },
    ];
    const jyxldataPie = [
        {
          x: '入警训练',
          y: 50,
        },
        {
          x: '晋升训练',
          y: 60,
        },
        {
          x: '警钟部门专业训练',
          y: 55,
        },
        {
          x: '警务技战术训练',
          y: 40,
        },
        {
          x: '发展训练',
          y: 30,
        },
    ]

/* eslint react/no-multi-comp:0 */
@connect(({
	lawpolicy,
	loading
}) => ({
	lawpolicy,
	loading: loading.models.lawpolicy,
}))

@Form.create()
class ProPublicPoliceList extends PureComponent {
	state = {
		modalVisible: false,
		updateModalVisible: false,
		viewModalVisible: false,
		expandForm: false,
		selectedRows: [],
		formValues: {},
		updateFormValues: {},
		viewFormValues: {},
		requestModelName:"lawpolicy",
		currentPage: 1,
		pageSize: 10,
	};


	componentDidMount() {

	}

	renderSimpleForm() {
		const {
			form: {
				getFieldDecorator
			}
		} = this.props;
		return(
		<Form onSubmit={this.handleSearch} layout="inline">
	      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				<Col md={8} sm={24}>
		        	<FormItem label="法律政策规定">
		        		{getFieldDecorator('lawpolicy')(<Input placeholder="请输入" />)}
					</FormItem>
	    		</Col>
		    	<Col md={8} sm={24}>
			        <FormItem label="实施时间">
				        {getFieldDecorator('starttime')(
				        	<RangePicker format={"YYYY-MM-DD"} style={{ width: '100%' }} placeholder={['开始时间', '结束时间']} />
				        )}
			    	</FormItem>
			    </Col>
			    <Col md={8} sm={24}>
			        <span className={styles.submitButtons}>
			        <Button type="primary" htmlType="submit">
			        	查询
			        </Button>
			        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
			        	重置
			        </Button>
			        {/*<a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
			        	展开 <Icon type="down" />
			        </a>*/}
			        </span>
		        </Col>
	        </Row>
        </Form>
		);
	}

	renderAdvancedForm() {
		const {
			form: {
				getFieldDecorator
			}
		} = this.props;
		return(
			<Form onSubmit={this.handleSearch} layout="inline">
		      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					<Col md={8} sm={24}>
			        	<FormItem label="法律政策规定">
			        		{getFieldDecorator('flzcgd')(<Input placeholder="请输入" />)}
						</FormItem>
		    		</Col>
			    	<Col md={8} sm={24}>
				        <FormItem label="实施时间">
					        {getFieldDecorator('starttime')(

					        	<RangePicker format={"YYYY-MM-DD"} style={{ width: '100%' }} placeholder={['开始时间', '结束时间']} />

					        )}
				    	</FormItem>
				    </Col>
		    	</Row>
			    <div style={{ overflow: 'hidden' }}>
					<div style={{ marginBottom: 24 }}>
					<Button type="primary" htmlType="submit">
			        查询
			        </Button>
			        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
			        重置
			        </Button>
			        <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
			        收起 <Icon type="up" />
			        </a>
		        	</div>
		        </div>
        </Form>
		);
	}

	renderForm() {
		const {
			expandForm
		} = this.state;

		return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
	}

	render() {
		const {
			loading,
		} = this.props;

		const {
			selectedRows,
			modalVisible,
			updateModalVisible,
			viewModalVisible,
			updateFormValues,
			viewFormValues,
			addButtonVisible,
		} = this.state;

    const defs = [
      {
        dataKey: 'y',
        min: 0,
      },
      {
        dataKey: 'x',
      },
    ];

    const cols = {
      key: {
        tickInterval: 20
      }
    };

		return(
			<PageHeaderWrapper title="公安队伍画像">
        <Card bordered={false}>
            <div className={styles.proUsertableList}>
                <div className={styles.proUsertableListOperator}>
                      <Tabs onChange={this.callback} type="card">
                        <TabPane tab="警力配置" key="1">
                            <div>
                                <div>人数</div>
                                <PoliceCharts data={jlpzdata} text="队伍情况分析" defs={defs}  column = {jlpzcolumn}  type={["histogram"]} height={280} txlx ='group' />
                            </div>
                            <div>
                                <div>人数</div>
                                <PoliceCharts data={jlpzdata} text="队伍情况分析" defs={defs}  column = {jlpzcolumn}  type={["histogram"]} height={280} txlx ='linegroup' />
                            </div>
                            <div style={{float: 'right',width: '100%',marginTop: '30px'}}>
                                <Card title="统计表">
                                    <Table columns={jlpzcolumns} dataSource={jlpzdata}/>
                                </Card>
                            </div>
                        </TabPane>
                        <TabPane tab="民警招录" key="2">
                            <div style={{float: 'left',width: '60%'}}>
                                <div>人数</div>
                                <PoliceCharts data={mjzldata} text="队伍情况分析" defs={defs}  column = {mjzlcolumn}  type={["histogram"]} height={280} txlx ='group' />
                            </div>
                            <div style={{float: 'right',width: '40%'}}>
                                <PieCharts data={mjzldataPie} text="队伍情况分析" />
                            </div>
                            <div>
                                <div>人数</div>
                                <PoliceCharts data={mjzldata} text="队伍情况分析" defs={defs}  column = {mjzlcolumn}  type={["histogram"]} height={280} txlx ='linegroup' />
                            </div>
                            <div style={{float: 'right',width: '100%',marginTop: '30px'}}>
                                <Card title="统计表">
                                    <Table columns={jlpzcolumns} dataSource={jlpzdata}/>
                                </Card>
                            </div>
                        </TabPane>
                        <TabPane tab="教育训练" key="3">
                            <div>
                                <div>人数</div>
                                <PoliceCharts data={jyxldata} text="队伍情况分析" defs={defs}  column = {jyxlcolumn}  type={["histogram"]} height={280} txlx ='group' />
                            </div>
                            <div style={{float: 'left',width: '60%'}}>
                                <div>人数</div>
                                <PoliceCharts data={jyxldata} text="队伍情况分析" defs={defs}  column = {jyxlcolumn}  type={["histogram"]} height={280} txlx ='linegroup' />
                            </div>
                            <div style={{float: 'right',width: '40%'}}>
                                <PieCharts data={jyxldataPie} text="队伍情况分析" />
                            </div>
                            <div style={{float: 'right',width: '100%',marginTop: '30px'}}>
                                <Card title="统计表">
                                    <Table columns={jyxlcolumns} dataSource={jyxldata}/>
                                </Card>
                            </div>
                        </TabPane>
                        <TabPane tab="职务" key="4">
                          {/*<div className={styles.proUsertableListForm}>{this.renderForm()}</div>*/}
                          <div style={{float: 'left',width: '50%'}}>
                              <div>人数</div>
                              <HistogramCharts data={zwdata} defs={defs} cols={cols} />
                          </div>
                          <div style={{float: 'right',width: '50%'}}>
                              <PieCharts data={zwdata} text="队伍情况分析" />
                          </div>
                          <div style={{float: 'left',width: '49%',marginTop: '50px'}}>
                              <Card title="文本描述">
                                  <div style={{marginLeft: 20}}>
                                  <h3>职务情况：</h3>
                                  {zwdata.map(item => (
                                    <p style={{marginLeft: 8,marginTop:10 }}>{item.x}：<span style={{color: '#009900'}}>{item.y}</span> 人 </p>
                                  ))}
                                  </div>
                              </Card>
                          </div>
                          <div style={{float: 'right',width: '49%',marginTop: '30px'}}>
                              <Card title="统计表">
                                  <Table columns={zwcolumns} dataSource={zwdata}/>
                              </Card>
                          </div>

                        </TabPane>
                        <TabPane tab="警衔" key="5">
                            <div style={{float: 'left',width: '50%'}}>
                                <div>人数</div>
                                <HistogramCharts data={jxdata} defs={defs} cols={cols} />
                            </div>
                            <div style={{float: 'right',width: '50%'}}>
                                <PieCharts data={jxdata} text="队伍情况分析" />
                            </div>
                            <div style={{float: 'left',width: '49%',marginTop: '50px'}}>
                                <Card title="文本描述">
                                    <div style={{marginLeft: 20}}>
                                    <h3>警衔情况：</h3>
                                    {jxdata.map(item => (
                                      <p style={{marginLeft: 8,marginTop:10 }}>{item.x}：<span style={{color: '#009900'}}>{item.y}</span> 人 </p>
                                    ))}
                                    </div>
                                </Card>
                            </div>
                            <div style={{float: 'right',width: '49%',marginTop: '30px'}}>
                                <Card title="统计表">
                                    <Table columns={jxcolumns} dataSource={jxdata}/>
                                </Card>
                            </div>
                        </TabPane>
                        <TabPane tab="民族" key="6">
                            <div style={{float: 'left',width: '50%'}}>
                                <div>人数</div>
                                <LineCharts data={mzdata}  />
                            </div>
                            <div style={{float: 'right',width: '50%'}}>
                                <PieCharts data={mzdata} text="队伍情况分析" />
                            </div>
                            <div style={{float: 'left',width: '49%',marginTop: '50px'}}>
                                <Card title="文本描述">
                                    <div style={{marginLeft: 20}}>
                                    <h3>民族情况：</h3>
                                    {mzdata.map(item => (
                                      <p style={{marginLeft: 8,marginTop:10 }}>{item.x}：<span style={{color: '#009900'}}>{item.y}</span> 人 </p>
                                    ))}
                                    </div>
                                </Card>
                            </div>
                            <div style={{float: 'right',width: '49%',marginTop: '30px'}}>
                                <Card title="统计表">
                                    <Table columns={mzcolumns} dataSource={mzdata}/>
                                </Card>
                            </div>
                        </TabPane>
                        <TabPane tab="性别" key="7">
                            <div>
                                <div>人数</div>
                                <PoliceCharts data={sexdata} text="队伍情况分析" defs={defs} type={["histogram"]} height={280} txlx ='ciax' />
                            </div>
                            <div style={{float: 'left',width: '49%',marginTop: '30px'}}>
                                <Card title="文本描述">
                                    <div style={{marginLeft: 20}}>
                                    <h3>性别情况：</h3>
                                    {sexdata.map((item,index) => (
                                       <p style={{marginLeft: 8,marginTop:4 }}>{item.label}年：男性 <span style={{color: '#009900'}}>{item.男}</span> 人、女性 <span style={{color: '#009900'}}>{item.女}</span> 人 </p>
                                       //return ind ? <span  style={{marginLeft: 8}}>{item.x}：{item.y} </span> : </p>
                                     ))}
                                    </div>
                                </Card>
                            </div>
                            <div style={{float: 'right',width: '49%',marginTop: '30px'}}>
                                <Card title="统计表">
                                    <Table columns={sexcolumns} dataSource={sexdata}/>
                                </Card>
                            </div>
                        </TabPane>
                        <TabPane tab="学历" key="8">
                            <div>
                                <div>人数</div>
                                <PoliceCharts data={xldata} text="队伍情况分析" defs={defs}  column = {xlcolumn}  type={["histogram"]} height={280} txlx ='group' />
                            </div>
                            <div style={{float: 'left',width: '49%',marginTop: '30px'}}>
                                <Card title="文本描述">
                                    <div style={{marginLeft: 20}}>
                                    <h3>学历情况：</h3>
                                    {xldata.map((item,index) => (
                                      <p style={{marginLeft: 8,marginTop:4 }}>{item.label}年：本科 <span style={{color: '#009900'}}>{item.本科}</span> 人、大专 <span style={{color: '#009900'}}>{item.大专}</span> 人、专科 <span style={{color: '#009900'}}>{item.专科}</span> 人、高中 <span style={{color: '#009900'}}>{item.高中}</span> 人</p>
                                      //return ind ? <span  style={{marginLeft: 8}}>{item.x}：{item.y} </span> : </p>
                                    ))}
                                    </div>
                                </Card>
                            </div>
                            <div style={{float: 'right',width: '49%',marginTop: '30px'}}>
                                <Card title="统计表">
                                    <Table columns={xlcolumns} dataSource={xldata}/>
                                </Card>
                            </div>
                        </TabPane>
                      </Tabs>
                </div>
            </div>
        </Card>

    </PageHeaderWrapper>
		);
	}
}

export default ProPublicPoliceList;
